<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" center>
      <el-row>
        <el-form
          :model="userFormModel"
          :rules="rulesForm"
          label-width="80px"
          ref="userFormModel"
        >
          <el-col :span="24">
            <el-col :span="6">
              <el-form-item label="账号">
                <el-input v-model="userFormModel.account"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="登陆密码">
                <el-input v-model="userFormModel.password"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门">
                <el-select v-model="userFormModel.deptid">
                  <el-option
                    :key="index"
                    :value="item.deptid"
                    :label="item.deptname"
                    v-for="(item, index) of deptList"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别">
                <el-radio-group v-model="userFormModel.sex">
                  <el-radio :label="`${'女'}`">女</el-radio>
                  <el-radio :label="`${'男'}`">男</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input v-model="userFormModel.username"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号">
                <el-input v-model="userFormModel.iphone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮箱">
                <el-input v-model="userFormModel.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="分机号">
                <el-input v-model="userFormModel.number"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24" align="center">
            <el-form-item class="btn-save">
              <el-button type="primary" @click="handleSave('userFormModel')"
                >保存信息</el-button
              >
              <el-button type="primary">清除数据</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { edituser, alldeptinfo } from "@/api/api";

@Component({})
export default class userManageModel extends Vue {
  protected name!: "userManageModel";
  @Prop(Object)
  protected dialog!: any | undefined;
  @Prop(Object)
  protected userFormModel!: any | undefined;
  @Emit("update")
  protected handleUpdate(page: number) {
    return page;
  }
  protected rulesForm = {};
  protected deptList = {};
  public get dialogVisible() {
    return this.dialog.isDialog;
  }

  public get title() {
    return this.dialog.title;
  }
  public set dialogVisible(val) {
    this.dialog.isDialog = val;
  }
  public set title(val) {
    this.dialog.title = val;
  }
  protected created() {
    this.getSelect();
  }
  protected async getSelect() {
    const res = await alldeptinfo();
    if (res) {
      const { success, message, object } = res;
      if (success) {
        this.deptList = object;
      } else {
        this.$notify({
          title: "提示",
          message: "数据信息获取失败"
        });
      }
    } else {
      this.$message({
        type: "error",
        message: "数据出错"
      });
    }
  }
  protected handleSave(name: any) {
    (this.$refs[name] as any).validate(async (volid: any) => {
      if (volid) {
        const {
          account,
          password,
          deptid,
          sex,
          username,
          iphone,
          email,
          number
        } = this.userFormModel;
        const res = await edituser({
          account,
          password,
          deptid,
          sex,
          username,
          iphone,
          email,
          number
        });
        if (res) {
          const { success } = res;
          if (success) {
            this.$notify({
              title: "提示",
              message: "保存成功"
            });
            await this.handleUpdate(1);
            this.dialog.isDialog = false;
          } else {
            this.$notify({
              title: "提示",
              message: "保存失败"
            });
          }
        } else {
          this.$notify({
            title: "提示",
            message: "数据出错"
          });
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.btn-save {
  /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
